<template>
  <ul>
      <router-link v-for='nav in navs' :key='nav.name'  :to='nav.path' tag='li'>
        <i v-html='nav.meta.icon'></i>
        <span>{{nav.meta.title}}</span>
      </router-link>
  </ul>
</template>

<script>
import routes from '@/routes/routes'
export default {
  name: 'ShopFooter',
  data () {
    return {
      navs: routes.filter(route => route.meta.isNav)
    }
  }
}
</script>

<style lang='scss' scoped>
  ul{
    display: flex;
    width: 100%;
    height: 100%;
    li{
      i{
        height: 50%;
        display: block;
        font-size: 20px;display: flex;
        align-items: center;
        justify-content: center;
      }
      span{
        flex: 1;
        font-size: .75rem;
        font-weight: 700;
        text-align: center;
      }
      flex: 1;
      text-align: center;
      font-family: "iconfont";
      flex-direction: column;
      display: flex;
    }
  }
</style>
